import React from 'react';
import { Card, Popconfirm, Button, PageHeader } from 'antd';
import VehicleTab from './tabs/vehicleTab';
import IpdaTab from './tabs/ipdaTab';
import TboxTab from './tabs/tboxTab';
import SimTab from './tabs/simTab';
import StatusTab from './tabs/statusTab';
import ReportTab from './tabs/reportTab';
import { connect } from 'dva';
import { filterAuth } from '@/support/common';
import PropTypes from 'prop-types';
import Title from 'antd/lib/typography/Title';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  menu: state.menu,
}))
export default class vehicleInfoDetailExtCompliant extends React.Component<any, any> {
  state = {
    current: 'vehicle',
  };

  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  onTabChange = (current: string) => {
    this.setState({ current });
  };

  render() {
    const {
      location: { pathname = '/' },
    } = this.props;
    const tabs = [];
    if (filterAuth('vehicleInfoDetailExtCompliant_vehicle', this.context.permissions, pathname)) {
      tabs.push({
        tab: '车辆信息',
        key: 'vehicle',
        com: () => <VehicleTab />,
      });
    }
    if (filterAuth('vehicleInfoDetailExtCompliant_ipda', this.context.permissions, pathname)) {
      tabs.push({
        tab: '车机信息',
        key: 'ipda',
        com: () => <IpdaTab />,
      });
    }
    if (filterAuth('vehicleInfoDetailExtCompliant_tbox', this.context.permissions, pathname)) {
      tabs.push({
        tab: 'TBOX信息',
        key: 'tbox',
        com: () => <TboxTab />,
      });
    }
    if (filterAuth('vehicleInfoDetailExtCompliant_simCard', this.context.permissions, pathname)) {
      tabs.push({
        tab: 'SIM卡信息',
        key: 'sim',
        com: () => <SimTab />,
      });
    }
    if (filterAuth('vehicleInfoDetailExtCompliant_vehicleCondition', this.context.permissions, pathname)) {
      tabs.push({
        tab: '车况',
        key: 'status',
        com: () => <StatusTab />,
      });
    }

    if (this.props.vehicleInfo.vin) {
      console.log('tabs', tabs);

      return (
        <>
          <Card onTabChange={this.onTabChange} tabList={tabs}>
            {tabs.find(e => e.key === this.state.current)?.com()}
          </Card>

          <Card style={{ display: 'flex', justifyContent: 'center' }} bordered={false}>
            <Popconfirm title="确定要关闭吗?" onConfirm={() => this.props.history.goBack()}>
              <Button key="back" size="middle" type="primary">
                关闭
              </Button>
            </Popconfirm>
          </Card>
        </>
      );
    } else {
      return (
        <PageHeader title="">
          <div align="center" width="100%" height="100%">
            <Title level={4}>未选择任何车机,请返回列表重新选择</Title>
            <Button type="primary" onClick={() => this.props.history.goBack()}>返回</Button>
          </div>
        </PageHeader>
      );
    }
  }
}
